html,body{
    height: 100%;
    width: 100%;
    background: linear-gradient(rgb(73, 72, 72),#555,#696868,rgb(129, 129, 129),rgb(158, 157, 157),rgb(129, 129, 129),#696868,#555,rgb(73, 72, 72));
    /* background: radial-gradient(circle,#555,#000,#000); */
    perspective:700px;
    overflow:hidden;
}
.boss{
    height: 100%;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style:preserve-3d;
        -ms-transform-style: preserve-3d;
    /* 动画名称  周期  无限  线性 */
    animation: rotateMyse 5s infinite linear;  
        -webkit-animation: rotateMyse 5s infinite linear;
        -moz-animation: rotateMyse 5s infinite linear;
        -ms-animation: rotateMyse 5s infinite linear;
}
.common{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    margin-top: -80px;
}
.one{
    background-image: url("../img/1.jpg");
    transform: rotateY(0deg) translateZ(160px);
}
.two{
    background-image: url("../img/2.jpg");
    transform:rotateY(60deg) translateZ(160px);
}
.three{
    background-image: url("../img/3.jpg");
    transform: rotateY(120deg) translateZ(160px);
}
.four{
    background-image: url("../img/4.jpg");
    transform: rotateY(180deg) translateZ(160px)
}
.five{
    background-image: url("../img/5.jpg");
    transform: rotateY(240deg) translateZ(160px)
}
.six{
    background-image: url("../img/6.jpg");
    transform: rotateY(300deg) translateZ(160px)
}
@keyframes rotateMyse{
    0%{ 
        transform: rotateY(0deg)
    }
    100%{
        transform: rotateY(360deg)
    }
}
